<!-- 单位选择组件，单选 -->
<template>
  <van-action-sheet v-model="showCompo" :close-on-click-overlay="false" @closed="closeSheet"  title="部门"
                    cancel-text="确定">
    <view class="tree-container">
      <!-- <input v-model="filterText" placeholder="输入关键字进行过滤" /> -->
      <van-field
          v-model="filterText"
          label=""
          placeholder="输入关键字进行过滤"
          :clearable="true"
      />
      <ly-tree :tree-data="treeData"
               :props="props"
               ref="tree"
               node-key="deptId"
               show-checkbox
               checkOnClickNode
               checkStrictly
               :default-expanded-keys="expandKeys"
               :currentNodeKey="currentNodeKey"
               @check-change="handleCheckChange"
               :filter-node-method="filterNode"
               child-visible-for-filter-node
      />
    </view>
  </van-action-sheet>
</template>

<script>

export default {
  props: {
    showOrgTree: {
      type: Boolean,
      default: false
    },
    forwardType: {
      type: String,
      default: ''
    },
    //详情，用来回显
    formDetail: {
      type: Object
    },
    nodeData: {
      showNode: {
        type: String,
        default: ''
      },
      hideNode: {
        type: String,
        default: ''
      }
    }

  },

  data() {
    return {
      showCompo: false,//当前组件是否显示
      expandKeys: ["0", "001", "001002"],//默认展开的节点-对应的deptId的值
      currentNodeKey: "001002005",//当前选中的节点
      props: function () {
        return {
          // 这里的label就可以使用函数进行自定义的渲染了
          // label(data, node) {
          // 	return '节点' + node.data.personName;
          // },
          label: 'deptName', // 指把数据中的‘personName’当做label也就是节点名称
          children: 'children' // 指把数据中的‘childs’当做children当做子节点数据
        }
      },
      fordTypeName: '',
      filterText: '',
      treeData: [],
      deptName: [],//选中的单位信息
      deptCode: [],//选中的单位信息
    }
  },
  mounted() {
    //从缓存加载单位树
    // this.getOrgTree()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    showOrgTree(val) {
      this.showCompo = val
    },
    nodeData: {
      handler(newName, oldName) {
        // if(this.util.isNotEmpty(newName)){
        // this.getOrgTree()
        // }
      },
      immediate: true,
      deep: true
    },
    forwardType(val) {
      this.fordTypeName = val
    }

  },
  methods: {
    closeSheet() {
      let orgInfo = {
        forwardType: this.fordTypeName,
        orgName: this.deptName.toString(),
        deptCode: this.deptCode.toString()
      }
      this.$emit('closeOrgTreeSheet', orgInfo)
    },

    // 只要节点的选中状态改变就触发（包括设置默认选中，点击选中/取消选中），会被触发多次
    handleCheckChange(obj) {
      if (obj.checked == true) {
        this.deptName.push(obj.data.deptName)
        this.deptCode.push(obj.data.deptId)
      } else {
        if (this.util.isNotEmpty(this.deptName)) {
          this.deptName = this.deptName.filter( t => t != obj.data.deptName);
        }
        if (this.util.isNotEmpty(this.deptCode)) {
          this.deptCode = this.deptCode.filter( t => t != obj.data.deptId);
        }
      }
    },

    //呈报单位查询
    filterNode(value, data) {
      if (!value) return true;
      return data.deptName.indexOf(value) !== -1;
    },


    //加载呈报单位树
    getOrgTree(checkedId) {
      console.log(checkedId)
      this.$http({
        url: this.$http.adornUrl(`/caac/platform/org/depts/orgDeptTree`),
        method: 'get',
        params: this.$http.adornParams({
          'systemKey': this.cache.get('userInfo').systemKey,//固定值
          'systemFlag': this.cache.get('userInfo').systemFlag,//固定值
          'showNode': this.nodeData.showNode,//只查管理局的树
          'hideNode': this.nodeData.hideNode

        })
      }).then(({data}) => {
        console.log("单位信息data: " + JSON.stringify(data.data));
        if (data.code == 200) {
          data.data.forEach((item) => {
            if (this.util.isNotEmpty(checkedId)) {
              let isChecked = checkedId.split(',').filter(v => v == item.deptCode)
              if (this.util.isNotEmpty(isChecked) && isChecked.length > 0) {
                item.checked = true
              } else {
                item.checked = false
              }
            } else {
              this.$set(item, 'checked', false)
            }
          })
          this.treeData = this.util.treeDataTranslate(data.data, 'deptId', 'parentId')
          this.deptName = []
          this.deptCode = []
        }

      })
    },
  }
}
</script>

<style>
.van-action-sheet {
  z-index: 9999;
  min-height: 80%;
}
</style>
